<template>
    <div class="chart-container">
        <div class="chart-title-wrapper">
            <div class="chart-title-block"></div>
            <div class="chart-title" style="opacity:1;">年度计划征收面积</div>
            <div class="chart-subtitle">{{title}}</div>
        </div>
        <div class="chart-content-wrapper">
            <div id="area-plan-year-chart" class="chart-content"></div>
        </div>
    </div>
</template>

<script>
let echarts = require('echarts');
import { cycledrow } from '@/utils/chart.js';
import { getExpropriatedArea } from '@/api/index.js';
export default {
    name: '',
    components:{
      
    },
    props:{
        year: {
            type: String
        },
        activeArea: {
            type: String
        }
    },
    data() {
        return {
            title:"",
            mapOption:{},
            myChart:null,
            chartData:{}
        }
    },
    watch:{
        year(val, oldVal){
            this.getTableData();
        },
        mapOption: {
            handler: function(newVal, oldVal) {
                if (this.myChart) {
                    if (newVal) {
                        this.myChart.setOption(newVal);
                    } else {
                        this.myChart.setOption(oldVal);
                    }
                } else {
                    var chartData=this.chartData;
                    this.$nextTick(function(){
                        this.drawChart(chartData);
                    })
                }
            },
            deep: true,
            //immediate: true
        }
    },
    mounted(){
        var _this=this;
        this.$nextTick(function(){
            this.getTableData();
            cycledrow('area-plan-year-chart',function(){
                _this.getTableData();
            });
        });
    },
    methods: {
        getTableData(){
            var _this=this;
            this.title=this.$route.params.name;
            getExpropriatedArea({
                id:this.activeArea,
                year:this.year
            }).then(res => {
                if(res.code==200){
                    var data=res.data;
                    _this.resetData(data);
                }
                return;
            }).catch(err => {
                console.log(err);
            });
        },
        resetData(arr){
            var xdata=[];
            var ydata=[];
            for(var i=0;i<arr.length;i++){
                var item=arr[i];
                xdata.push(item.name);
                ydata.push(item.value);
                if(i==arr.length-1){
                    var params={
                        id:'area-plan-year-chart',
                        label: xdata,
                        data:[
                            {
                                label: "年度计划征收面积",
                                data: ydata
                            }
                        ]
                    }
                    this.chartData=params;
                    this.drawChart(params);
                }
            }
        },
        drawChart(data){
            var seriesArr=data.data.map((item,index)=>{
                var seriesItem={
                    name: '',
                    type: 'line',
                    smooth: 0.6,
                    itemStyle: {
                        normal: {
                            color: "#fff",
                            lineStyle: {
                                color: "#05A697"
                            }
                        }
                    },
                    symbol: 'circle',
                    symbolSize: 6,
                    areaStyle: {
                        normal: {
                            color:new echarts.graphic.LinearGradient(0,0,0,0.8,[
                                {
                                    offset:0,
                                    color:'#05A697'
                                },
                                {
                                    offset:1,
                                    color:'#162444'
                                },
                            ])
                        }
                    },
                    data: item.data
                }
                return seriesItem;
            });
            var myChart=echarts.init(document.getElementById('area-plan-year-chart'));
            this.myChart=myChart;
            this.mapOption={
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'line',
                        label: {
                            backgroundColor: '#10C2F6'
                        }
                    },
                    formatter: '{a} {b}年：{c}'
                },
                color:['rgb(19,173,223)','rgb(19,223,96)'],
                grid: {
                    left: '20px',
                    right: '15px',
                    bottom: '20px',
                    top: '50px',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        name:'',
                        boundaryGap: false,
                        data: data.label,
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        axisLine:{
                            show: true,
                            lineStyle:{
                                color:'#224A80'
                            }
                        },
                        splitLine:{show: false},
                        axisTick: {show: false}
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        //min: 100000,
                        //max: 500000,
                        //interval:100000,
                        name: "单位/万㎡",
                        nameTextStyle: {
                            color: "#fff",
                            padding: [0, 60, 15, 0],
                            nameLocation: "start",
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#fff',
                            }
                        },
                        axisLine:{
                            show: true,
                            lineStyle:{
                                color:'#224A80',
                                shadowOffsetY:-40,
                                shadowColor:'#224A80'
                            }
                        },
                        splitLine:{
                            show: true,
                            lineStyle:{
                                color:'#224A80'
                            }
                        },
                        axisTick: {show: false}
                    }
                ],
                series:seriesArr
            };
       
            
        }
    }
}
</script>

<style scoped>
.chart-container{
    width:100%;
    height:100%;
    display:flex;
    flex-direction: column;
}
.chart-content-wrapper{
    flex:1;
    width:100%;
    display: flex;
}
.chart-content{
    flex:1;
    padding:15px;
}
.chart-title-wrapper{
    width:97%;
    margin:0 auto;
    height:80px;
    display:flex;
    justify-content: space-between;
    position:relative;
}
.chart-title-block{
    width: 255px;
    height: 38px;
    background: linear-gradient(90deg, #05FCFC 0%, #171B26 100%);
    opacity: 0.28;
    position:relative;
    left:30px;
    top:35px;
}
.chart-title{
    font-size: 24px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #01F4F5;
    line-height: 33px;
    letter-spacing: 3px;
    position: absolute;
    top:36px;
    left:39px;
    white-space: nowrap;
}
.chart-subtitle{
    font-size: 22px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #01F1F2;
    line-height: 30px;
    letter-spacing: 3px;
    position: relative;
    top:38px;
    right:24px;
}
</style>


